<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <h1 class="text-xl font-semibold text-gray-800">通讯录</h1>
        <div class="flex items-center gap-4">
          <button class="text-gray-600 hover:text-gray-900">
            <i class="fa fa-ellipsis-v text-xl"></i>
          </button>
          <button class="text-gray-600 hover:text-gray-900">
            <i class="fa fa-user-circle-o text-xl"></i>
          </button>
        </div>
      </div>
    </header>

    <!-- 搜索区域 -->
    <div class="bg-white py-4 px-4 shadow-sm">
      <div class="flex gap-2">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="请输入姓名/工号查询"
          class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
        >
        <button 
          @click="handleSearch"
          class="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors duration-200"
        >
          搜索
        </button>
      </div>
    </div>

    <!-- 联系人列表 -->
    <div class="container mx-auto px-4 py-6">
      <div v-if="filteredCounselors.length > 0" class="space-y-4">
        <div 
          v-for="(counselor, index) in filteredCounselors" 
          :key="index"
          class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow duration-200"
        >
          <div class="flex items-start gap-3">
            <div class="text-blue-500 mt-1">
              <i class="fa fa-user-circle text-xl"></i>
            </div>
            <div class="flex-1">
              <div class="flex justify-between items-start">
                <h3 class="font-medium text-gray-900">{{ counselor.name }}</h3>
                <span class="text-gray-500 text-sm">{{ counselor.id }}</span>
              </div>
              
              <div class="mt-2 space-y-1 text-sm">
                <p class="text-gray-600">所在单位: {{ counselor.department }}</p>
                <p class="text-gray-600">辅导员类型: {{ counselor.type }}</p>
                <p class="text-gray-600">辅导员职务: {{ counselor.position }}</p>
                <p class="text-gray-600">申请时间: {{ counselor.applicationTime }}</p>
              </div>
              
              <button 
                @click="makeCall(counselor.phone)"
                class="mt-4 w-full bg-red-600 text-white py-2 rounded-md hover:bg-red-700 transition-colors duration-200"
              >
                拨打电话
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 无结果状态 -->
      <div v-else class="text-center py-12 text-gray-500">
        <p>未找到匹配的辅导员信息</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 模拟辅导员数据
const counselorsData = [
  {
    id: '11006',
    name: '刘涛',
    department: 'A学院',
    type: '专职辅导员',
    position: '副书记',
    applicationTime: '2025-03-01 00:00:00',
    phone: '13800138000'
  },
  {
    id: '11004',
    name: '张三',
    department: 'B学院',
    type: '专职辅导员',
    position: '副书记',
    applicationTime: '2025-03-01 00:00:00',
    phone: '13900139000'
  }
];

// 搜索查询
const searchQuery = ref('');

// 筛选后的辅导员列表 - 已修复变量名错误
const filteredCounselors = computed(() => {
  if (!searchQuery.value) {
    return counselorsData;  // 修复了这里的变量名
  }
  
  const query = searchQuery.value.toLowerCase();
  return counselorsData.filter(counselor =>  // 修复了这里的变量名
    counselor.name.toLowerCase().includes(query) || 
    counselor.id.includes(query)
  );
});

// 处理搜索
const handleSearch = () => {
  // 搜索逻辑已在computed属性中实现
  console.log('搜索:', searchQuery.value);
};

// 拨打电话功能
const makeCall = (phoneNumber) => {
  // 实际项目中可以调用设备的拨号功能
  alert(`正在拨打: ${phoneNumber}`);
  // 或者使用tel协议: window.location.href = `tel:${phoneNumber}`;
};
</script>

<style scoped>
/* 基础样式补充 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>
